<template>
    <div class="menu-box">
        <div class="menu-item" :class="{ 'menu-item-active': item === selectMenu }" v-for="item in 10" :key="item"
            @click="onClickMenu(item)" @mouseenter="onMouseEnter(item)">
            <i class="iconfont icon-dangan" />
            <span>目录{{ item }}</span>
        </div>
    </div>
</template>

<script lang='ts' setup name='MenuEx'>
import { ref } from 'vue'

const emit = defineEmits(['menu-click'])
let props = defineProps(['menushow'])

function onClickMenu(index: number) {
    emit('menu-click')
    selectMenu.value = index
}

let selectMenu = ref(0)

function onMouseEnter(index: number) {
    if (props.menushow) {
        selectMenu.value = index
    }
}

function UnSelected() {
    selectMenu.value = 0
}

defineExpose({ UnSelected })

</script>

<style lang='scss'>
.menu-box {
    flex: 1;
    overflow-y: auto;
    scrollbar-width: none;

    .menu-item {
        text-align: center;
        display: flex;
        flex-direction: column;
        padding: 10px 0;
        color: #fff;
        cursor: pointer;

        .iconfont {
            font-size: 20px;
        }

        span {
            font-size: 12px;
            margin-top: 3px;
        }
    }

    .menu-item:hover {
        background-color: #259cfc;
    }

    .menu-item-active {
        background-color: #259cfc;
    }

    .menu-sub-modal {
        position: absolute;
        top: 0;
        left: 60px;
        bottom: 0;
        right: 0;
        background-color: #7f7f7f;
    }
}
</style>